﻿@using WorkBasket.Api



@model WorkBasket.Areas.Design.Models.DesignVM

@{
    ViewBag.Title = "Form Design";
}
@section Scripts{

    <script src="~/Scripts/app/Design/FormTree.js"></script>
    <script src="~/Scripts/app/Design/FormController.js"></script>
}


<h2>Form Design</h2>

<div class="container" ng-controller="wbdsFormCTRL" ng-cloak>
    <div class="row">
        <div class="col-md-12">
            <label class="label label-default">Select Workflow</label>
            <select class="form-control"
                    ng-model="SelectedWorkflow"
                    ng-options="Workflow.WorkflowName for Workflow in Workflows"
                    ng-change="OnWorkflowChange(SelectedWorkflow)"></select>
            <label class="label label-default">Select Form</label>
            <select class="form-control"
                    ng-model="SelectedForm"
                    ng-options="Form.FormName for Form in Forms"
                    ng-change="OnFormChange(SelectedForm)"></select>

            <label class="label label-default" for="txtFormName">Form Name</label>
            <input class="form-control" id="txtFormName"
                   ng-model="SelectedForm.FormName"
                   ng-change="UpdateForm(SelectedForm)"
                   ng-model-options="{ updateOn: 'blur' }"
                   value="{{SelectedForm.FormName}}" />


            <button class="btn btn-success" ng-click="CreateNewForm()">Create Form</button>
            <button class="btn btn-danger">Delete Form</button>
            <button class="btn btn-info">Preview Form</button>
        </div>
    </div>
    <div class="row">

        <div class="col-md-4">

            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-form navbar-left">
                    @foreach (IControl c in Model.Controls)
                    {
                        <button class="btn btn-default" ng-click="AddNode('@c.GetType().FullName')" title="@c.ControlName">
                            <span class="@c.ToolBoxIcon"></span>
                        </button>
                    }
                </div>
            </nav>
            <div id="jstree" class="WFArea">
                <ul></ul>
            </div>
        </div>
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <span>
                        <button class="glyphicon glyphicon-refresh"></button><span class="panel-title">Preview</span>
                    </span>
                </div>
                <div class="panel-body">

                    <ul ng-repeat="Item in Properties">
                        <li ng-show="Item.Default.length>1  && Item.Name !='Field'">
                            <label class="label label-default">{{Item.Name}}</label>
                            <select class="form-control"
                                    ng-model="Item.Value"
                                    ng-options="opt for  opt in Item.Default"
                                    ng-change="UpdateProperty(Item)"></select>

                        </li>

                        <li ng-show="Item.Default.length<=1  && Item.Name !='Field'">
                            <label class="label label-default">{{Item.Name}}</label>
                            <input class="form-control"
                                   ng-change="UpdateProperty(Item)"
                                   ng-model-options="{ updateOn: 'blur' }"
                                   ng-model="Item.Value"
                                   value="Item.Value" />
                        </li>

                        <li ng-show="Item.Name == 'Field'">
                            <label class=" label label-default">
                                {{Item.Name}}
                            </label>
                            <select class="form-control"
                                    ng-model="Item.Value"
                                    ng-options="Field.FieldName as Field.FieldName for  Field in Fields"
                                    ng-change="UpdateProperty(Item)"></select>


                        </li>

                    </ul>

                </div>

            </div>
        </div>
    </div>
</div>
